<template>
  <!-- 热门图书 -->
  <div>
    <div class="popularBooks">
      <div
        class="newBook-oneBook"
        @click="handleBookClick(popularBooksItem.id)"
        v-for="popularBooksItem in popList"
        :key="popularBooksItem.id"
      >
        <div class="oneBookImg">
          <img
            v-lazy="`https://file.ituring.com.cn/Original/${popularBooksItem.coverKey}`"
            :alt="popularBooksItem.name"
          />
        </div>
        <div class="oneBook-text">
          <b class="oneBook-name">{{ popularBooksItem.name }}</b>
          <p class="oneBook-author">
            {{ popularBooksItem.authorNameString }}（作者）
          </p>
          <p class="oneBook-translator">
            {{
              popularBooksItem.translatorNameString
                ? `${popularBooksItem.translatorNameString}（译者）`
                : ''
            }}
          </p>
        </div>
      </div>
    </div>
    <!-- 查看热门书籍 -->
    <router-link to="/book" class="popMore">查看全部热门书籍</router-link>
  </div>
</template>

<script>
export default {
  name: 'PopularBooks',
  data() {
    return {}
  },
  methods: {
    handleBookClick(bookId) {
      this.$router.push({
        name: 'BookDetail',
        params: {
          bookId
        }
      })
    }
  },
  props: {
    popList: Array
  }
}
</script>

<style lang='less'>
.popularBooks {
  width: 1100px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  .newBook-oneBook {
    margin-bottom: 20px;
    margin-right: 20px;
  }
}
.popMore {
  display: block;
  font-size: 16px;
  color: #4684e2;
  margin: 0 0 20px;
  text-align: center;
  &:hover {
    color: #3a72c5;
    text-decoration: none !important;
  }
}
</style>